<template>
    <div class="show-contain"
         :class="[compOption.isClick && mode == 'sheji' ? 'active-bordert' : '',mode == 'sheji' ? 'widget-item' : '']"
         @click.stop="clickToggleBg" style="overflow: hidden">
        <div style="display: flex;align-items: center;width: 100%;margin-bottom: 10px">
            <div class="required-title" v-if="mode != 'sheji' && compOption.options.required">*</div>
            <div class="sort-style" v-if="prentCompOption.isChildSort && prentCompOption.isPrentAndChildSort">
                {{ prentCompOption.sortTitle + '.' + (childInd + 1) }}
            </div>
            <div class="sort-style" v-else-if="prentCompOption.isChildSort">{{ childInd + 1 }}</div>
            <div class="sort-style" v-else-if="prentCompOption.isPrentAndChildSort">{{ prentCompOption.sortTitle }}
            </div>
            <div class="title-openEdit" @click.stop="openTitleEditor(compOption.displayName)"
                 v-html="mode == 'sheji' ? compOption.displayName : compOption.displayName + (compOption.options.score !==null || compOption.options.totalSource == 0 ? '' :  ` <span style='width:80px;align-self: flex-end'>(${compOption.options.totalSource}) 分</span>`)"
                 :style="{border:mode == 'sheji' ? '1px solid rgba(204, 200, 200, 0.5)' : 'none',padding:mode == 'sheji' ? '10px' : '0',
           }" style="font-size: 18px"></div>
            <div style="margin-left: 10px" v-if="compOption.isClick && mode == 'sheji'">
                <div class="flex-row">
                    <!--                    <span class="el-icon-rank font-color-main" style="margin-right: 10px"></span>-->
                    <!--                    <span class="el-icon-document-copy font-color-main" style="margin-right: 10px"></span>-->
                    <span class="el-icon-delete font-color-main" @click="delSourceZu"></span>
                </div>
            </div>
        </div>
        <div  style="margin-bottom: 10px;width: 100%" v-if="mode == 'yulan' && (compOption.options.score !==null && compOption.options.score != '不适用')">
            <el-row style="display: flex;align-items: center">
                <el-col :span="1">
                    <div>已得</div>
                </el-col>
                <el-col :span="3">
                    <el-input v-model="compOption.options.score"  class="el-border-dev"
                              :disabled="sourceMode == 'yulan'"></el-input>
                </el-col>
                <el-col :span="2">
                    <div>分</div>
                </el-col>
            </el-row>
        </div>
        <div v-if="compOption.options.questionStem" :style="{marginBottom: mode == 'sheji' ? '10px' : '20px'}"
             style="width: 100%">
            <el-input v-model="compOption.options.placeholderContent" v-if="mode == 'sheji'"
                      placeholder="请输入题干说明"
                      style="width: 100%"></el-input>
            <div v-else class="tigan">
                {{ compOption.options.placeholderContent }}
            </div>
        </div>

        <div style="width: 100%;overflow-x: auto;">
            <div style="width:100%;display: flex;align-items: flex-start">
                <el-table
                        border
                        :data="compOption.options.tableData"
                        style="flex: 1">
                    <el-table-column v-for="(item,index) in compOption.options.inputTableConfig"
                                     :prop="item.prop" align="center" :key="Math.random()"
                                     :width="item.width">
                        <template slot="header">
                            <div style="display: flex;align-items: center;justify-content: center">
                                <div v-html="item.label" @click="openTableNameHeader(item,index)"></div>
                                <div v-if="item.label && mode == 'sheji'" style="margin-left: 8px">
                                    <el-dropdown @command="(name) => clickDelRight(name,item,index)">
                                        <i class="el-icon-more"></i>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item command="删除">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </div>
                        </template>
                        <template slot-scope="scope">
                            <div v-if="item.prop == 'start'" style="display: flex;align-items: center;justify-content: center">
                                <div  @click="openTableName(scope.row,scope.$index)"
                                      v-html="scope.row[item.prop]"></div>
                                <div v-if="mode == 'sheji'" style="margin-left: 8px">
                                    <el-dropdown @command="(name) => clickDelCell(name,scope.row,scope.$index)">
                                        <i class="el-icon-more"></i>
                                        <el-dropdown-menu slot="dropdown">
                                            <el-dropdown-item command="删除">删除</el-dropdown-item>
                                        </el-dropdown-menu>
                                    </el-dropdown>
                                </div>
                            </div>

                            <el-input v-else :disabled="mode == 'sheji' || mode == 'yulan'
                            || compOption.options.readOnly"
                                      v-model="scope.row[item.prop]"
                            type="textarea" :autosize="true" clearable></el-input>
                        </template>
                    </el-table-column>
                </el-table>
                <div style="margin:13px 0 0 20px;color: #409eff" class="icon-jiahao iconfont"
                     v-if="compOption.isClick && mode == 'sheji'"
                     @click="addData1"></div>
            </div>
            <div style="margin:13px 0 0 0;color: #409eff" class="icon-jiahao iconfont"
                 v-if="compOption.isClick && mode == 'sheji'"
                 @click="addData2"></div>
        </div>
        <div v-if="mode != 'sheji'" style="margin-top: 10px;width: 100%">
            <render-remark :comp-option="compOption" :mode="mode"></render-remark>
        </div>
        <dialog-editor ref="dialogEditor" @throwHtml="(html) => compOption.displayName = html"></dialog-editor>
        <dialog-editor ref="dialogTableEditor" @throwHtml="getTableHtml"></dialog-editor>
        <dialog-editor ref="dialogTableHeaderEditor" @throwHtml="getTableHeaderHtml"></dialog-editor>
    </div>
</template>

<script>
import {openEditor} from '@/minexs/index'
import {methodRef} from '@/components/form-designer/widget-panel/main-comp-panal/methodRef'
import RenderRemark from "@/components/renderRemark/renderRemark.vue";

export default {
    name: "jumultInput-editor",
    components: {RenderRemark},
    mixins: [openEditor, methodRef],
    props: {
        compOption: {
            type: Object,
        },
        prentCompOption: {
            type: Object,
        },
        childInd: {
            type: Number
        },
        mode: {
            type: String,
            default: 'sheji'
            /**
             * sheji
             * xiezuo
             * yulan
             * */
        },
        sourceMode: {
            type: String,
            default: 'yulan'
        }
    },
    data() {
        return {
            tabId: '',
            tabHeaderInd: '',
        }
    },
    methods: {
        clickToggleBg() {
            if (this.$props.mode == 'sheji') this.$emit('changeClick', this.$props.compOption.id, this.$props.prentCompOption.id)
        },
        changeValue() {
            if (this.compOption.options.onChangeValue) {
                this.$emit('activeStartChange', {
                    code: this.compOption.options.onChangeValue,
                    value: this.compOption.options.value
                })
            }
        },
        delSourceZu() {
            this.$confirm('是否确认删除当前问题', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                const ind = this.prentCompOption.widgetList.findIndex(item => item.id == this.compOption.id)
                if (ind != -1) {
                    this.prentCompOption.widgetList.splice(ind, 1)
                    this.$message({
                        type: 'success',
                        message: '删除成功!'
                    });
                }
            })
        },
        openTableName(row, ind) {
            if (this.mode != 'sheji') return
            this.tabId = ind
            this.$refs.dialogTableEditor.openDialog(row.start)
        },
        getTableHtml(html) {
            const obj = {
                ...this.compOption.options.tableData[this.tabId],
                start: html
            }
            this.compOption.options.tableData.splice(this.tabId, 1, {
                ...obj
            })
            console.log(this.compOption.options.tableData,'this.compOption.options.tableData')
        },
        openTableNameHeader(item, ind) {
            if (this.mode != 'sheji') return
            this.tabHeaderInd = ind
            this.$refs.dialogTableHeaderEditor.openDialog(item.label)
        },
        getTableHeaderHtml(html) {
            const obj = {
                ...this.compOption.options.inputTableConfig[this.tabHeaderInd],
                label: html
            }
            this.compOption.options.inputTableConfig.splice(this.tabHeaderInd, 1, {
                ...obj
            })
        },
        addData1() {
            var times = (new Date()).getTime();
            this.compOption.options.inputTableConfig.push(
                {
                    label: `填空${this.compOption.options.inputTableConfig.length}`,
                    prop: `start${Math.random() + times}`,
                    width: 'auto'
                }
            )
        },
        addData2() {
            const propKey = this.compOption.options.inputTableConfig.map(item => item.prop)
            for (let val of this.compOption.options.tableData) {
                const tableKey = Object.keys(val)
                for (let valKey of propKey) {
                    const ind = tableKey.findIndex(key => key == valKey)
                    if (ind == -1) {
                        val[valKey] = ''
                    }
                }
            }

            this.compOption.options.tableData.push({})
            for (let val of propKey) {
                this.compOption.options.tableData[this.compOption.options.tableData.length - 1][val] = val == 'start' ? `问题${this.compOption.options.tableData.length}` : ''
            }
        },

        clickDelRight(name,item,index){
            if(name == '删除'){
                this.compOption.options.inputTableConfig.splice(index,1)
            }
        },
        clickDelCell(name,item,index){
            if(name == '删除'){
                this.compOption.options.tableData.splice(index,1)
            }
        }
    }
}
</script>

<style scoped lang="scss">
.widget-item {
  border: .5px solid #e5e5e5;
  border-radius: 3px;
  padding: 20px;
}
</style>
